<template>
    <div>
      <h2>Post</h2>
      <Gallery v-bind:imageList=postList></Gallery>
      <el-pagination
        background
        layout="prev, next"
        @prev-click="preClick()"
        @next-click="nextClick()">
      </el-pagination>
    </div>
</template>

<script>
import Gallery from '../../views/Gallery'
export default {
  name: 'Post',
  components: { Gallery },
  data () {
    return {
      postList: {}
    }
  },
  methods: {
    getPostList () {
      const userId = this.$store.getters.getCurrentUserId
      // console.log('userId(getPostList):' + userId)
      this.$axios.get('/images', {
        params: { userId },
        headers: { Authorization: this.$store.state.jwt }
      })
        .then(response => {
          this.postList = response.data.data
        })
    },
    preClick () {
      if (this.postList.hasPreviousPage) {
        const userId = this.$store.getters.getCurrentUserId
        const pageNum = this.postList.pageNum - 1
        this.$axios.get('/images', { params: { pageNum, userId } }).then(response => {
          this.postList = response.data.data
        })
      }
    },
    nextClick () {
      if (this.postList.hasNextPage) {
        const userId = this.$store.getters.getCurrentUserId
        const pageNum = this.postList.pageNum + 1
        this.$axios.get('/images', { params: { pageNum, userId } }).then(response => {
          this.postList = response.data.data
        })
      }
    }
  },
  mounted () {
    if (this.$store.state.loggedIn) {
      this.getPostList()
    }
  }
}
</script>

<style scoped>

</style>
